iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
1
Modern Web

從零開始的網頁設計系列 第 5

Day05 : 新技能GET _ 常用標籤 (三) _ ol ul li & 開始使用開發者工具 & a

  • 分享至 

  • xImage
  •  

今天要分享的標籤是我在工作的時候超級無敵常用程度僅次於 divspan

「請問為什麼你會很常用他!!!」

當我們要做複數個連續的一樣長相的元件的時候就會使用他
最簡單的莫過於我們直接往上看iT邦幫忙的選單,也就是你目前正在看的這頁的最上方的那一排
他就是利用ul li 去製作的

「你怎麼知道他是用ul li去做的」
想知道嗎? 小精靈跟我說的 (被痛毆

我們先簡單的講解一下ol ul li
通常li都是被包在ol 或者是 ul 裡面的

實例

<ol>
  <li>項目一</li>
  <li>項目二</li>
  <li>項目三</li>
</ol>
<ul>
  <li>項目一</li>
  <li>項目二</li>
  <li>項目三</li>
</ul>

結果

https://ithelp.ithome.com.tw/upload/images/20171217/20104423E01QC50xYG.png

這兩個最大的差別就在於一個是有序號一個沒序號,是不是很簡單明瞭啊?


那我們就來講關於小精靈告訴我的選單是用ul li 做的是去哪看到的
在這邊我們要開啟的是 開發者工具
什麼是開發者工具呢?顧名思義就是方便我們開發網站用的工具,每個瀏覽器都有
點擊Chrome右上方的的三個點點
https://ithelp.ithome.com.tw/upload/images/20171217/20104423kEWeUk19nN.png
選擇 更多工具 > 開發人員工具
快捷鍵

windows -> F12
MAC -> option + command +i

這時候我們會看到像這樣的頁面跑出來(偷偷換成iT邦幫忙的網頁)
https://ithelp.ithome.com.tw/upload/images/20171217/20104423dWGWMPg4un.png

是不是一大堆東西跑出來,我們今天只先分享一個最基本的功能,剩下的等之後有用到在講會比較有印象
點擊 開發者工具左上角的 icon https://ithelp.ithome.com.tw/upload/images/20171217/20104423iyV19rJYcW.png
https://ithelp.ithome.com.tw/upload/images/20171217/20104423i3JAkvj5M8.png
這時候你的滑鼠只要移動到任一個元件上面
都會出現一層藍色的覆蓋區域https://ithelp.ithome.com.tw/upload/images/20171217/20104423H8aVKHLRlL.png
黑色的小小對話框顯示的是他目前的標籤以及CSS的class名稱 (這個部分大概在未來幾天會開始分享)
點下去後,開發者工具會自動幫你跳到該元件的html標籤位置
https://ithelp.ithome.com.tw/upload/images/20171217/20104423E05jp1pFE4.png
橘色的高亮( 那一條橘色的槓槓 )部分就是我們目前選取這個元件的標籤
而右手邊則會一起出現這個元件有套用到的CSS效果

我們會看到裡面有一個標籤 a

a

簡單講就是用來製作超連結的標籤 有時候我也會利用a來製作按鈕
用法

<a href="想要連結過去的網址">文字</a>

我們來實際看例子

<a href="https://ithelp.ithome.com.tw/">點我連結到iT邦幫忙</a>

結果

https://ithelp.ithome.com.tw/upload/images/20171217/20104423jviRLEHsov.png
文字變成了藍色有底線的狀態,代表目前他是一個連結
我們來用開發者工具看看
https://ithelp.ithome.com.tw/upload/images/20171217/20104423ye08nxxaFv.png
是不是就跟我們index.html裡面的內容一樣呢?

今天的分享就到這邊,明天要來分享table的使用方法後就開始進入CSS3的世界

套件推薦
Auto Rename Tag
在第二天的時候我們提果html標籤大部分都是有起始標籤以及結束標籤的
那如果當我們越包越多要改的時候就會有點小麻煩
這個套件的用處就是當你更改起始標籤的時候,結束標籤也會一起改變


想到就更新專業 樂樂
有任何問題都歡迎一起提出來討論>_O


上一篇
Day04 : 常用標籤 ( 二 ) div 、span
下一篇
Day06 : 新手村的最後一個任務 _ 常用標籤(四) _ table
系列文
從零開始的網頁設計22
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言